<template>
  <div id="app">
    <div>

      <div v-if="isShowEdit">
        <input type="text" v-model="editValue" ref="inp" placeholder="自带光标" />
        <button>确认</button>
      </div>

      <div v-else>
        <span>{{title}}</span>
        <button @click="editFn">编辑</button>
      </div>
    </div>

    <BaseChart />

  </div>
</template>

<script>
  // 异步更新  
  // 点击 编辑按钮 -->  打开编辑输入框 ,并获取焦点 , 没有成功
  // 

  import BaseChart from './components/BaseChart'
  export default {
    data(){
      return {
        title:'去编辑 : ',
        isShowEdit:false,
        editValue:''
      }
    },
    components:{
      BaseChart
  },
  methods:{
    editFn(){
      // 点击了编辑按钮
      this.isShowEdit = true
      // console.log(this.$refs.inp);
      // 传统解决方案,等一等
      // setTimeout(()=>{
      //   this.$refs.inp.focus()
      // },300)

      // $nexkTick() 
      this.$nextTick(()=>{
        this.$refs.inp.focus()
      })

    }
  }
}
</script>

<style>

</style>
